<template>
  <div class="bp-center">
    <div class="circle-check">
      <dl v-for="item in cockpitList"
          :key="item.id"
          :class="{'circle-check-on': curItem.id === item.id}"
          @click="changeActive(item)">
        <dt><i></i></dt>
        <dd>{{ item.name }}</dd>
      </dl>
    </div>
    <div class="circle-base-title">{{ curItem.name }}</div>
    <div class="circle-out">
      <div class="circle-in">
        <div class="circle-base">
          <!-- 切换模块 -->
          <div class="circle-base-each" v-if="curItem.imgSrc !== null">
            <div class="circle-base-pic" v-if="curItem.id === 3">
              <div class="sswkj-bg">
                <div class="sswkj-dot sswkj-dot1"><i></i><span></span></div>
                <div class="sswkj-dot sswkj-dot2"><i></i><span></span></div>
                <div class="sswkj-name1"></div>
                <div class="sswkj-dot-big" @click="sswkjChange"><i></i><span></span></div>
                <div class="sswkj-name2" @click="sswkjChange"></div>
                <div class="sswkj-dot sswkj-dot3"><i></i><span></span></div>
                <div class="sswkj-dot sswkj-dot4"><i></i><span></span></div>
                <div class="sswkj-name3"></div>
              </div>
            </div>
            <div class="circle-base-pic" v-if="curItem.id === 4">
              <div class="sswsy-bg">
                <div class="sswsy-line1"></div>
                <div class="sswsy-line1-light"></div>
                <div class="sswsy-line2"></div>
                <div class="sswsy-line2-light"></div>
                <div class="sswsy-line3"></div>
                <div class="sswsy-line3-light"></div>
                <div class="sswsy-block sswsy-block1" @click="sswsyChange">
                  <div class="sswsy-dot"></div>
                  <div class="sswsy-word"></div>
                </div>
                <div class="sswsy-block sswsy-block2" @click="sswsyChange">
                  <div class="sswsy-dot"></div>
                  <div class="sswsy-word"></div>
                </div>
                <div class="sswsy-block sswsy-block3" @click="sswsyChange">
                  <div class="sswsy-dot"></div>
                  <div class="sswsy-word"></div>
                </div>
                <div class="sswsy-block sswsy-block4" @click="sswsyChange">
                  <div class="sswsy-dot-big"></div>
                  <div class="sswsy-word"></div>
                </div>
                <div class="sswsy-block sswsy-block5" @click="sswsyChange">
                  <div class="sswsy-dot"></div>
                  <div class="sswsy-word"></div>
                </div>
                <div class="sswsy-block-see sswsy-block6"></div>
                <div class="sswsy-block-see sswsy-block7"></div>
                <div class="sswsy-block sswsy-block8" @click="sswsyChange">
                  <div class="sswsy-dot"></div>
                  <div class="sswsy-word"></div>
                </div>
                <div class="sswsy-block sswsy-block9" @click="sswsyChange">
                  <div class="sswsy-dot"></div>
                  <div class="sswsy-word"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="circle-base-each" v-if="curItem.imgSrc === null">
            <MapLayer :layerInfo='curItem'></MapLayer>
          </div>
          <!-- 展示内容 -->
          <div class="circle-base-bg" v-show="curItem.id !== 4"></div>
          <div class="circle-base-bg1" v-show="curItem.id === 4"></div>
          <div class="circle-base-dot"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import MapLayer from '../mapLayer/index.vue'
import { OneMapModule } from '@/store/modules/oneMap'

@Component({
  name: 'BpCenter',
  components: {
    MapLayer
  }
})
export default class BpCenter extends Vue {
  private curItem:any = {}
  private cockpitList:Array<any> = [
    {name: '长沙市土地利用现状', id: 1, imgSrc: null, layerId: '9914',type: 'time'},
    {name: '长沙市国土空间总体规划', id: 2, imgSrc: null, layerId: 'Map828,Map28,Map513', type: 'noTime'},
    {name: '“十四五”市域国土空间格局', id: 3, imgSrc: '', layerId: null, type: null},
    {name: '“十四五”中心城区空间发展格局', id: 4, imgSrc: '', layerId: null, type: null},
    {name: '土地全周期一张图', id: 5, imgSrc: null, layerId: 'bd44142467004028816fd16f45ed7886', type: 'noTime'},
    {name: '项目全周期一张图', id: 6, imgSrc: null, layerId: 'Map1164', type: 'noTime'}
  ]
  mounted() {
    this.curItem = this.cockpitList[0]
    OneMapModule.getInitConfig()
  }
  changeActive(item: any) {
    this.curItem = item
  }
  sswkjChange(){
    this.curItem = this.cockpitList[3]
  }
  sswsyChange(){
    this.curItem = this.cockpitList[4]
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';
.bp-center {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.circle-out {
  width: 100%;
  height: 142%;
  padding: 24px;
  border-radius: 50%;
  background: url('~@/assets/cockpit/center-circle-out.png') no-repeat 0/ 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -51%);
  z-index: 10;
  .circle-in {
    width: 100%;
    height: 100%;
    padding: 8px;
    background: url('~@/assets/cockpit/center-circle-in.png') no-repeat 0/ 100% 100%;
    .circle-base {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      position: relative;
      z-index: 1;
      overflow: hidden;
      .circle-base-each {
        width: 100%;
        height: 100%;
      }
      .circle-base-dot {
        width: 96%;
        height: 96%;
        background: url('~@/assets/cockpit/circle-base-dot.png') no-repeat 0/ 100% 100%;
        position: absolute;
        left: 2%;
        top: 2%;
        z-index: -1;
        animation: circleDot 30s linear infinite;
      }
      .circle-base-bg {
        width: 100%;
        height: 100%;
        background: url('~@/assets/cockpit/circle-base-bg.png') no-repeat 0/ 100% 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -2;
      }
      .circle-base-bg1 {
        width: 100%;
        height: 100%;
        background: url('~@/assets/cockpit/circle-base-bg1.png') no-repeat 0/ 100% 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -2;
      }
    }
  }
}
@font-face {
  font-family: SanJiXin;
  src: url('~@/assets/cockpit/SanJiXinHeiJianTi-2.ttf');
}
.circle-base-title {
  display: inline-block;
  height: 56px;
  padding: 12px 48px;
  background: url('~@/assets/cockpit/circle-base-title-bg.png') no-repeat 0/ 100% 100%;
  font-size: 20px !important;
  line-height: 28px;
  color: #fff;
  text-shadow: 0 0 4px #000;
  font-family: SanJiXin;
  text-align: center;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 20;
  &::before {
    content: '';
    display: block;
    width: 81px;
    height: 81px;
    background: url('~@/assets/cockpit/circle-base-title-left.png') no-repeat 0/ 100% 100%;
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translate(0, -50%);
  }
  &::after {
    content: '';
    display: block;
    width: 81px;
    height: 81px;
    background: url('~@/assets/cockpit/circle-base-title-right.png') no-repeat 0/ 100% 100%;
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translate(0, -50%);
  }
}
.circle-base-pic {
  width: 100%;
  height: 100%;
  position: relative;
}
.circle-check {
  position: absolute;
  z-index: 20;
  top: 40px;
  left: 0;
  >dl {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    cursor: pointer;
    margin: 4px 0 0 0;
    &:nth-child(1) {
      margin-left: 98px;
    }
    &:nth-child(2) {
      margin-left: 74px;
    }
    &:nth-child(3) {
      margin-left: 54px;
    }
    &:nth-child(4) {
      margin-left: 38px;
    }
    &:nth-child(5) {
      margin-left: 24px;
    }
    &:nth-child(6) {
      margin-left: 14px;
    }
    >dt {
      flex: none;
      width: 32px;
      height: 32px;
      background: url('~@/assets/cockpit/circle-check-out.png') no-repeat 0/ 100% 100%;
      position: relative;
      >i {
        display: none;
        width: 14px;
        height: 14px;
        background: url('~@/assets/cockpit/circle-check-in.png') no-repeat 0/ 100% 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    >dd {
      font-size: 14px;
      line-height: 20px;
      color: #00EAFF;
      text-align: left;
      position: relative;
      user-select: none;
      margin: 0 0 0 8px;
      &::before {
        content: '';
        width: 211px;
        height: 26px;
        background: url('~@/assets/cockpit/circle-check-line.png') no-repeat 10px center/ 197px 2px;
        position: absolute;
        left: -10px;
        bottom: -18px;
      }
    }
    &.circle-check-on {
      >dt {
        >i {
          display: block;
        }
      }
      >dd {
        color: #fff;
        text-shadow: 0 0 4px #006AFF;
        &::before {
          background: url('~@/assets/cockpit/circle-check-line-on.png') no-repeat 0/ 100% 100%;
        }
      }
    }
  }
}
@keyframes circleDot {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(45deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-45deg);
  }
  0% {
    transform: rotate(0deg);
  }
}
.sswkj-bg {
  width: 1055px;
  height: 538px;
  background: url('~@/assets/cockpit/sswkj-bg.png') no-repeat 0/ 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  .sswkj-dot {
    width: 28px;
    height: 28px;
    position: absolute;
    z-index: 5;
    cursor: pointer;
    &:hover {
      transform: scale(1.1, 1.1);
    }
    >i {
      display: block;
      width: 100%;
      height: 100%;
      background: url('~@/assets/cockpit/sswkj-dot.png') no-repeat 0/ 100% 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }
    >span {
      display: block;
      width: 100%;
      height: 100%;
      background: rgba(#ED525C, .5);
      border-radius: 50%;
      animation: sswkjShadow 4s linear infinite;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
  }
  .sswkj-dot1 {
    top: 280px;
    left: 283px;
  }
  .sswkj-dot2 {
    top: 297px;
    left: 325px;
  }
  .sswkj-dot3 {
    top: 279px;
    left: 642px;
  }
  .sswkj-dot4 {
    top: 325px;
    left: 718px;
  }
  .sswkj-dot-big {
    width: 52px;
    height: 52px;
    position: absolute;
    top: 294px;
    left: 451px;
    z-index: 5;
    cursor: pointer;
    &:hover {
      transform: scale(1.05, 1.05);
    }
    >i {
      display: block;
      width: 100%;
      height: 100%;
      background: url('~@/assets/cockpit/sswkj-dot-big.png') no-repeat 0/ 100% 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }
    >span {
      display: block;
      width: 100%;
      height: 100%;
      background: rgba(#ED525C, .5);
      border-radius: 50%;
      animation: sswkjShadow 4s linear infinite;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
  }
  .sswkj-name1 {
    width: 74px;
    height: 24px;
    background: url('~@/assets/cockpit/sswkj-name1.png') no-repeat 0/ 100% 100%;
    position: absolute;
    top: 311px;
    left: 282px;
    z-index: 10;
    cursor: pointer;
    &:hover {
      transform: scale(1.05, 1.05);
    }
  }
  .sswkj-name2 {
    width: 104px;
    height: 32px;
    background: url('~@/assets/cockpit/sswkj-name2.png') no-repeat 0/ 100% 100%;
    position: absolute;
    top: 306px;
    left: 427px;
    z-index: 10;
    cursor: pointer;
    &:hover {
      transform: scale(1.05, 1.05);
    }
  }
  .sswkj-name3 {
    width: 74px;
    height: 24px;
    background: url('~@/assets/cockpit/sswkj-name3.png') no-repeat 0/ 100% 100%;
    position: absolute;
    top: 310px;
    left: 656px;
    z-index: 10;
    cursor: pointer;
    &:hover {
      transform: scale(1.05, 1.05);
    }
  }
}
@keyframes sswkjShadow {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.3, 1.3);
  }
  100% {
    transform: scale(1, 1);
  }
}
.sswsy-bg {
  width: 597px;
  height: 655px;
  background: url('~@/assets/cockpit/sswsy-bg.png') no-repeat 0/ 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  .sswsy-line1 {
    width: 159px;
    height: 360px;
    background: url('~@/assets/cockpit/sswsy-line1.png') no-repeat 0/ 100% 100%;
    position: absolute;
    top: 195px;
    left: 120px;
    z-index: 10;
  }
  .sswsy-line1-light {
    width: 165px;
    height: 366px;
    background: url('~@/assets/cockpit/sswsy-line1-light.png') no-repeat 0/ 100% 100%;
    position: absolute;
    top: 192px;
    left: 117px;
    z-index: 9;
    animation: sswsyLight 4s linear infinite;
  }
  .sswsy-line2 {
    width: 286px;
    height: 32px;
    background: url('~@/assets/cockpit/sswsy-line2.png') no-repeat 0/ 100% 100%;
    position: absolute;
    top: 365px;
    left: 118px;
    z-index: 8;
  }
  .sswsy-line2-light {
    width: 301px;
    height: 49px;
    background: url('~@/assets/cockpit/sswsy-line2-light.png') no-repeat 0/ 100% 100%;
    position: absolute;
    top: 355px;
    left: 111px;
    z-index: 7;
    animation: sswsyLight 4s linear infinite;
  }
  .sswsy-line3 {
    width: 270px;
    height: 64px;
    background: url('~@/assets/cockpit/sswsy-line3.png') no-repeat 0/ 100% 100%;
    position: absolute;
    top: 424px;
    left: 132px;
    z-index: 8;
  }
  .sswsy-line3-light {
    width: 288px;
    height: 86px;
    background: url('~@/assets/cockpit/sswsy-line3-light.png') no-repeat 0/ 100% 100%;
    position: absolute;
    top: 413px;
    left: 123px;
    z-index: 7;
    animation: sswsyLight 4s linear infinite;
  }
  .sswsy-block {
    position: absolute;
    cursor: pointer;
    z-index: 15;
    transition: all .2s ease;
    &:hover {
      transform: scale(1.1, 1.1);
    }
    .sswsy-dot {
      width: 24px;
      height: 24px;
      background: url('~@/assets/cockpit/sswsy-dot-small.png') no-repeat 0/ 100% 100%;
      position: absolute;
    }
    .sswsy-dot-big {
      width: 52px;
      height: 52px;
      background: url('~@/assets/cockpit/sswsy-dot-big.png') no-repeat 0/ 100% 100%;
      position: absolute;
    }
    .sswsy-word {
      position: absolute;
    }
  }
  .sswsy-block-see {
    position: absolute;
    z-index: 12;
  }
  .sswsy-block1 {
    width: 93px;
    height: 95px;
    background: url('~@/assets/cockpit/sswsy-block1.png') no-repeat 0/ 100% 100%;
    top: 252px;
    left: 139px;
    .sswsy-dot {
      top: 32px;
      left: 29px;
    }
    .sswsy-word {
      width: 74px;
      height: 24px;
      background: url('~@/assets/cockpit/sswsy-word1.png') no-repeat 0/ 100% 100%;
      top: 32px;
      left: -46px;
    }
  }
  .sswsy-block2 {
    width: 84px;
    height: 65px;
    background: url('~@/assets/cockpit/sswsy-block2.png') no-repeat 0/ 100% 100%;
    top: 259px;
    left: 206px;
    .sswsy-dot {
      top: 15px;
      left: 24px;
    }
    .sswsy-word {
      width: 74px;
      height: 24px;
      background: url('~@/assets/cockpit/sswsy-word2.png') no-repeat 0/ 100% 100%;
      top: 14px;
      left: 52px;
    }
  }
  .sswsy-block3 {
    width: 68px;
    height: 65px;
    background: url('~@/assets/cockpit/sswsy-block3.png') no-repeat 0/ 100% 100%;
    top: 350px;
    left: 152px;
    .sswsy-dot {
      top: 30px;
      left: 38px;
    }
    .sswsy-word {
      width: 88px;
      height: 24px;
      background: url('~@/assets/cockpit/sswsy-word3.png') no-repeat 0/ 100% 100%;
      top: 30px;
      left: -50px;
    }
  }
  .sswsy-block4 {
    width: 82px;
    height: 95px;
    background: url('~@/assets/cockpit/sswsy-block4.png') no-repeat 0/ 100% 100%;
    top: 333px;
    left: 222px;
    z-index: 16;
    .sswsy-dot-big {
      top: 42px;
      left: 0px;
    }
    .sswsy-word {
      width: 104px;
      height: 32px;
      background: url('~@/assets/cockpit/sswsy-word4.png') no-repeat 0/ 100% 100%;
      top: 52px;
      left: -26px;
    }
  }
  .sswsy-block5 {
    width: 51px;
    height: 96px;
    background: url('~@/assets/cockpit/sswsy-block5.png') no-repeat 0/ 100% 100%;
    top: 316px;
    left: 303px;
    .sswsy-dot {
      top: 14px;
      left: 7px;
    }
    .sswsy-word {
      width: 74px;
      height: 24px;
      background: url('~@/assets/cockpit/sswsy-word5.png') no-repeat 0/ 100% 100%;
      top: 14px;
      left: 34px;
    }
  }
  .sswsy-block6 {
    width: 33px;
    height: 107px;
    background: url('~@/assets/cockpit/sswsy-block6.png') no-repeat 0/ 100% 100%;
    top: 330px;
    left: 354px;
  }
  .sswsy-block7 {
    width: 70px;
    height: 124px;
    background: url('~@/assets/cockpit/sswsy-block7.png') no-repeat 0/ 100% 100%;
    top: 420px;
    left: 167px;
  }
  .sswsy-block8 {
    width: 59px;
    height: 114px;
    background: url('~@/assets/cockpit/sswsy-block8.png') no-repeat 0/ 100% 100%;
    top: 420px;
    left: 240px;
    .sswsy-dot {
      top: 55px;
      left: -7px;
    }
    .sswsy-word {
      width: 74px;
      height: 24px;
      background: url('~@/assets/cockpit/sswsy-word8.png') no-repeat 0/ 100% 100%;
      top: 54px;
      left: 20px;
    }
  }
  .sswsy-block9 {
    width: 59px;
    height: 58px;
    background: url('~@/assets/cockpit/sswsy-block9.png') no-repeat 0/ 100% 100%;
    top: 406px;
    left: 295px;
    .sswsy-dot {
      top: 8px;
      left: 5px;
    }
    .sswsy-word {
      width: 74px;
      height: 24px;
      background: url('~@/assets/cockpit/sswsy-word8.png') no-repeat 0/ 100% 100%;
      top: 8px;
      left: 32px;
    }
  }
}
@keyframes sswsyLight {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
